<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .screenshot{
        margin-top: 80px;
        position: relative;
    }
</style>
<body>
<div id="app">
    <div>选择图片:<input type="file" ref="file"></div>
    <el-button type="primary" @click="getPolicy">上传</el-button>
    <!--图片部分-->
    <div id="screenshot" class="screenshot">
        <span v-for="(imgUrl, index) in srcList" :key="index" class="slideshow">
          <el-image style="width:175px; height: 116px"
                    :src="imgUrl"
                    :preview-src-list="srcList"
          />
        </span>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                srcList: []
            };
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            getPolicy(){
                var systemId = "112";
                if(!systemId){
                    systemId = "";
                    alert(systemId);
                }
                const that = this;
                // 获取阿里云上传签名
                axios.get('http://localhost:8080/aliyun/oss/policy')
                    .then(function (response) {
                        that.ossUpload(that.$refs.file.files[0],response.data.resultContent);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            ossUpload(file,ossToken){
                const filename =file.name;
                let formData = new FormData();
                //注意formData里append添加的键的大小写
                console.log(ossToken)
                formData.append('key', ossToken.dir + filename); //存储在oss的文件路径
                formData.append('OSSAccessKeyId', ossToken.accessid); //accessKeyId
                formData.append('policy', ossToken.policy); //policy
                formData.append('Signature', ossToken.signature); //签名
                formData.append('callback', ossToken.callback); //回调
                formData.append('success_action_status', 200); //成功后返回的操作码
                //如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
                formData.append("file",file);
                axios.post(ossToken.host,formData,{
                    'Content-Type':'multipart/form-data'
                }).then(res=>{
                    console.log(res)
                    this.srcList.push(res.data.resultContent.filename);
                })

            }
        }
    })
</script>
</html>
